<template>
    <div>
        <ul>
            <li class="title">
                <div>
                    <van-icon name="wap-nav" color="#fff" size="1.5rem" />
                </div>
                <span v-html="det.brand"></span>
            </li>
            <li class="banner">
                <div class="icon">
                    <van-icon name="arrow-left" size="2.5rem" @click="gohome" />
                </div>
                <div>
                    <van-swipe>
                        <van-swipe-item v-for="(image, index) in images" :key="index">
                            <img v-lazy="image" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </li>
            <li class="pri">
                <div>
                    <p>¥<span v-html="det.originprice"></span>
                        <em v-html="det.category"></em>
                    </p>
                </div>
            </li>
            <li class="text">
                <p v-html="det.proname"></p>
            </li>
            <li class="guess">
                <div>猜你喜欢</div>
            </li>
            <li class="bt">
                <div class="iconb">
                    <van-grid :column-num="3">
                        <van-grid-item icon="service-o" text="" />
                        <van-grid-item icon="like-o" text="" />
                        <van-grid-item icon="bag-o" text="" @click="goshopi" />
                    </van-grid>
                </div>
                <div class="btn">
                    <div class="join" @click="addshop(str)">加入购物车</div>
                    <div class="buy">立即购买</div>
                </div>
            </li>
        </ul>
        <leshang_dl></leshang_dl>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';
import leshang_dl from '@/components/leshang/subcomponent/leshang_dl.vue';
import service from '@/utils/service';
export default {
    data() {
        return {
            det: "",
            images: []
        }
    },
    mounted() {
        this.str = this.$route.query.cid
        service({
            url: `http://118.178.238.19:3001/api/pro/detail/${this.$route.query.cid}`,
            method: "get"
        }).then((res) => {
            this.det = res.data.data
            this.images.push(res.data.data.img1)
            this.images.push(res.data.data.img2)
            this.images.push(res.data.data.img3)
            this.images.push(res.data.data.img4)
        })
    },
    methods: {
        goshopi() {
            this.$router.push('/goshopi')
        },
        gohome() {
            this.$router.push('/home')
        },
        addshop(str) {
            if (sessionStorage.getItem('token')) {
                service({
                    url: "http://118.178.238.19:3001/api/cart/add",
                    method: "post",
                    data: {
                        num: 1,
                        proid: str,
                        userid: sessionStorage.getItem('userid')
                    }
                }).then(res => {
                    // console.log(res);
                    if (res.data.data == 0 || res.data.data == 1) {
                        Dialog.alert({
                            message: '加入购物车',
                        }).then(() => {
                            // on close
                        });
                    }
                })
            } else {
                Dialog.confirm({
                    title: '您尚未登录',
                    message: '是否跳转至登录页面?',
                })
                    .then(() => {
                        this.$router.push('/dl')
                    })
                    .catch(() => {
                        // on cancel
                    });
            }

        }

    },
    components: {
        leshang_dl
    }
}
</script>

<style scoped>
.van-swipe {
    width: 365px;
    text-align: center;
    background: #fff;
}

.van-swipe img {
    width: 60%;
    display: inline-block;
}

.guess {
    height: 48px;
    width: 96%;
    margin: auto;
    border-radius: 10px;
    background: #000;
    text-align: center;
    line-height: 48px;
    margin-bottom: 10px;
    color: #fff;
}

.bt {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
}

.iconb {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {
    display: flex;
}

.join,
.buy {
    width: 117.5px;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid #000;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    background: #fff;
}

.buy {
    background: #000;
    color: #fff;
}

.text {
    height: 108px;
    width: 96%;
    margin: auto;
    background: #eee;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-bottom: 10px;
}

.text p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-top: 20px;
}

.icon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

.pri {
    height: 54px;
    background: #eee;
}

.pri div {
    width: 96%;
    height: 54px;
    margin: auto;
    background: #000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #fff;
    line-height: 54px;
}

.pri div p {
    margin-left: 10px;
    color: #fff;
}

.pri div p em {
    font-style: normal;
    margin-left: 5px;
}

.pri div span {
    font-size: 24px;
}

.title {
    height: 46px;
    background: #000;
    position: relative;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title div {
    position: absolute;
    left: 10px;
    top: 10px;
}

.banner {
    background: #eee;
    position: relative;
    height: 214px;
}
</style>